import React        from 'react';
import { Link }     from 'react-router-dom';
import _mm          from '../../util/Mutil.js'
import _user        from '../../service/userService.js'
import DateUtil     from '../../util/DateUtil.js'

import PageTitle    from '../../common/pageTitle';
import Pagination   from '../../common/pagination';
import TableList    from '../../common/tableList';

class UserList extends React.Component{
  constructor (props) {
    super(props)
    this.state = {
      pageNum:  1,
      list:    []
    }
  }
  render () {
    let listBody = this.state.list.map((item, index) => {
      return (
        <tr key={index}>
          <td>{item.id}</td>
          <td>{item.username}</td>
          <td>{item.email}</td>
          <td>{item.phone}</td>
          <td>{DateUtil.formatDate.formatDateString(item.createTime, 'yyyy-MM-dd hh:mm')}</td>
        </tr>
      )
    })
    return (
      <div>
        <PageTitle title="用户列表"/>
        <TableList tableHeads={['ID', '用户名', '邮箱', '电话', '注册时间']}>
          {listBody}
        </TableList>
        <Pagination current={this.state.pageNum} 
            total={this.state.total} 
            onChange={ (pageNum) => { this.onPageNumChange(pageNum) } } />
      </div>
    )
  }
  // 生命周期
  componentDidMount () {
    this.loadUserList()
  }
  // events
  loadUserList () {
    _user.getUserList(this.state.pageNum).then(res => {
      this.setState(res)
    }, err => {
      this.setState({
        list : []
      })
      _mm.errorTips(err)
    }) 
  }
  onPageNumChange (num) {
    this.setState({
      pageNum: num
    }, () => {
      this.loadUserList()
    })
  }
}
export default UserList;